<template>
    <el-card shadow="never">
        <template #header>
            <div class="cardHeader">
                <span class="cardHeaderText">{{ title }}</span>
                <el-tag type="danger" effect="plain">
                    {{ tip }}
                </el-tag>
            </div>
        </template>
        <el-row :gutter="20">
            <el-col :span="6" :offset="0" v-for="(item, index) in btns" :key="index">
                <el-card shadow="hover" class="IndexCard">
                    <div class="IndexCardCard">
                        <span class="IndexCardCard1">{{ item.value }}</span>
                        <span class="IndexCardCard2">{{ item.label }}</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </el-card>
</template>
<script setup>
defineProps({
    title: String,
    tip: String,
    btns: Array
})
</script>
<style scoped lang="less">
.cardHeader {
    display: flex;
    justify-content: space-between;

    .cardHeaderText {
        font-size: 14px;
    }
}

.IndexCard {
    border: 0;
    background-color: #eee;

    .IndexCardCard {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .IndexCardCard1 {
            font-size: 18px;
            margin-bottom: 2px;
        }

        .IndexCardCard2 {
            font-size: 12px;
            color: #999
        }
    }
}
</style>